<template>
  <div class="ek-peview-image">
    <el-image-viewer
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :url-list="imageList"
      :initial-index="initialIndex"
      :infinite="true"
      fit="cover"
      @close="handleClose"
      v-if="ekVisiable"
    ></el-image-viewer>
  </div>
</template>

<script setup>
import { defineProps, watch, computed } from "vue";
const props = defineProps({
    // 显示隐藏
  visiable: {
    type: Boolean,
    default: false,
  },
  // 列表
  imageList: {
    type: Array,
    default: [],
  },
  initialIndex: {
    type: Number,
    default: 0
  }

});

const emit = defineEmits(["update:visiable", "on-close"]);

function handleClose() {
  emit("on-close");
}


// 是否显示
const ekVisiable = computed({
  get() {
    return props.visiable;
  },
  set(value) {
    emit("update:visiable", value);
  },
});
</script>

<style scoped>

</style>
